<#-- 获取该步骤的表单 -->
<#macro getStepForm ctrlmodel step>
<#compress>
<#if ctrlmodel.getPSDEEditForms()??>
<#list ctrlmodel.getPSDEEditForms() as form>
<#if form.getPSDEWizardForm()??><#assign wizardForm = form.getPSDEWizardForm() />
<#if wizardForm.getPSDEWizardStep()??><#assign wizardStep = wizardForm.getPSDEWizardStep() />
<#if wizardStep.getId() == step.getId()>${form.getName()}</#if>
</#if>
</#if>
</#list>
</#if>
</#compress>  
</#macro>
<#if ctrl.render??>
    ${ctrl.render.code}
<#else>
    <layout class="app-state-wizard<#if ctrl.getPSSysCss?? && ctrl.getPSSysCss()??> ${ctrl.getPSSysCss().getCssName()}</#if>">
        <#if ctrl.getPSDEWizard?? && ctrl.getPSDEWizard()?? && ctrl.getPSDEWizard().getPSDEWizardSteps?? && ctrl.getPSDEWizard().getPSDEWizardSteps()??>
        <div class="view-steps">
            <div class="background-box"></div>
            <div class="steps_icon" @click="handleClick('PRE')"><i class="el-icon-arrow-left"></i></div>
            <el-steps class="wizard-steps"  :active="(wizardForms.indexOf(activeForm) + 1)" finish-status="success" align-center>
        <#list ctrl.getPSDEWizard().getPSDEWizardSteps() as step>
                <el-step :class="{'app-active-step':activeForm==='<@getStepForm ctrlmodel=ctrl step=step />'?true:false}">
                    <template v-slot:title>
                        <div v-popover:<@getStepForm ctrlmodel=ctrl step=step />_popover @click="hanleClick('<@getStepForm ctrlmodel=ctrl step=step />')">
                            <span><i v-if="activeForm != '<@getStepForm ctrlmodel=ctrl step=step />' && !historyForms.includes('<@getStepForm ctrlmodel=ctrl step=step />')" class="el-icon-lock"></i>${step.getTitle()}</span>
                        </div>
                    </template>
                </el-step>
        </#list>
            </el-steps>
            <div class="steps_icon" @click="handleClick('NEXT')"><i class="el-icon-arrow-right"></i></div>
        </div>
        <#if ctrl.getPSDEEditForms()??>
        <#list ctrl.getPSDEEditForms() as form>
        <#assign handler = form.getPSAjaxControlHandler() />
        <el-popover v-model="stepVisiable['${form.getName()}']" ref="${form.getName()}_popover" popper-class="app-state-wizard-popover-container" placement="bottom-<#if form_has_next>start<#else>end</#if>" trigger="click">
            <div class="app-state-wizard-container">
                <div class="app-state-wizard-header">
                    <div class="app-state-wizard-header-extra">
                        <Icon type="md-open" size="18" @click="handleOPen('${form.getName()}')"/>
                        <Icon type="md-close" size="18" @click="handleClose('${form.getName()}')"/>
                    </div>
                </div>
                <div class="popover-title">${form.getLogicName()}</div>
                <div class="app-state-wizard-content">
                    <view_${form.getName()}
                    :key="'${form.name}'" 
                    :viewState='wizardState'
                    :context="context"
                    :viewparams="viewparams"
                    updateAction="<#if form.getUpdatePSControlAction()?? && form.getUpdatePSControlAction().getPSAppDEMethod()??>${form.getUpdatePSControlAction().getPSAppDEMethod().getCodeName()}</#if>"
                    removeAction="<#if form.getRemovePSControlAction()?? && form.getRemovePSControlAction().getPSAppDEMethod()??>${form.getRemovePSControlAction().getPSAppDEMethod().getCodeName()}</#if>"
                    loadAction="<#if form.getGetPSControlAction()?? && form.getGetPSControlAction().getPSAppDEMethod()??>${form.getGetPSControlAction().getPSAppDEMethod().getCodeName()}</#if>"
            <#if form.getHookEventNames()??>
                <#list form.getHookEventNames() as eventName>
                    @${eventName?lower_case}="${form.name}_${eventName?lower_case}" 
                </#list>
            </#if>
                    name='${form.name}' 
                    ref='${form.name}'>
                    </view_${form.getName()}>
                </div>
                <div class="app-state-wizard-footer">
                    <i-button  v-if="isVisiable('${form.name}','PREV')" @click="onClickPrev('${form.name}')" ><Icon type="ios-arrow-back"></Icon></i-button>
                    <i-button  v-if="isVisiable('${form.name}','NEXT')" @click="onClickNext('${form.name}')" type="primary" long>{{$t('app.wizardPanel.next')}}</i-button>
                    <i-button  v-if="isVisiable('${form.name}','FINISH')" @click="onClickFinish('${form.name}')" type="primary" long>{{$t('app.wizardPanel.complete')}}</i-button>
                </div>
            </div>
        </el-popover>
        <drawer class="app-state-wizard-drawer" :closable="false"  :value="drawerOpenStatus.isOpen && drawerOpenStatus.formName == '${form.name}'"
        :width="600"  title="${form.getLogicName()}" @on-visible-change="onVisibleChange($event)">
            <view_${form.getName()}
            :key="'${form.name}'" 
            :viewState='wizardState'
            :context="context"
            :viewparams="viewparams"
            updateAction="<#if form.getUpdatePSControlAction()?? && form.getUpdatePSControlAction().getPSAppDEMethod()??>${form.getUpdatePSControlAction().getPSAppDEMethod().getCodeName()}</#if>"
            removeAction="<#if form.getRemovePSControlAction()?? && form.getRemovePSControlAction().getPSAppDEMethod()??>${form.getRemovePSControlAction().getPSAppDEMethod().getCodeName()}</#if>"
            loadAction="<#if form.getGetPSControlAction()?? && form.getGetPSControlAction().getPSAppDEMethod()??>${form.getGetPSControlAction().getPSAppDEMethod().getCodeName()}</#if>"
    <#if form.getHookEventNames()??>
        <#list form.getHookEventNames() as eventName>
            @${eventName?lower_case}="${form.name}_${eventName?lower_case}" 
        </#list>
    </#if>
            name='${form.name}' 
            ref='${form.name}'>
            </view_${form.getName()}>
        </drawer>
        </#list>
        </#if>
        </#if>
    </layout> 
</#if>